<template>
  <div class="receipt">
    <!-- 拿到小票数据列表 --仅作展示-->
    <div v-for="(v, index) in propData" :key="index">
      <div class="basic">
        <!-- 是列表第一个且前几项都不展示时的时候不展示 下划线 -->
        <div class="divider" v-show="shouldShowDivider(v, index)"></div>
        <div class="top_title" v-show="shouldShowTitle(v)">
          {{ v.sectionTitle }}
        </div>
        <!-- 遍历每项数据， 展示内容 -->
        <div v-for="(item, index2) in v.fieldList" class="text_1" :key="index2">
          <!-- 页头数据 -->
          <div v-show="isPageHeadItem(v, item, 0)" style="margin-bottom: 2px">
            <!-- 示例油站 -->
            <div :class="{ top_title: item.fieldName == 'stationName' }">
              {{ item.example }}
            </div>
            <div class="divider" v-show="shouldShowDivider3(v, item)"></div>
          </div>
          <div v-show="isPageHeadItem(v, item, 1)">
            {{ item.fieldTitle + ": " + item.example }}
          </div>
          <!-- 其他内容展示数据 -->

          <div v-if="shouldShowItem(v, item, 0)">
            {{ item.fieldTitle + ": " + item.example }}
          </div>

          <!-- 输入框内容展示 -->
          <div v-show="shouldShowItem(v, item, 1)" class="div_center">
            {{ item.fieldCustomContent }}
          </div>
          <!-- 页尾下划线 -->
          <div
            class="divider2"
            v-if="shouldShowDivider2(v, item, index2)"
          ></div>
        </div>
        <div v-if="sectionName.includes(v.sectionName)">
          <div class="table">
            <div
              class="table_item"
              v-show="showTableItem(ele, v)"
              v-for="(ele, index3) in v.fieldList"
              :key="index3"
            >
              <div>{{ ele.fieldTitle }}</div>
              <div
                v-for="(exm, index4) in ele.example.split(';') || []"
                :key="index4"
              >
                {{ exm }}
              </div>
            </div>
          </div>
        </div>
        <div style="margin-bottom: 3px"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ReceiptBJTab",
  props: {
    titleName: String,
    activeName: {
      default: "bj",
    },
    dataList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      sectionName: [
        "collectionDetails",
        "rechargeSum",
        "oilSum",
        "employeeSum",
        "couponSum",
        "discountByOil",
        "discountByDzk",
      ],
      propData: this.dataList,
    };
  },
  watch: {
    dataList: {
      handler(newVal) {
        this.propData = newVal;
        // this.showInfo = this.dataList[0];
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 表格内容是否展示
    showTableItem(ele, v) {
      return ele.printEnabled == 1 && v.printEnabled == 1;
    },
    // 是否展示下划线
    shouldShowDivider(section, index) {
      let isAllDisabled = true;
      //当全面全部没有选中时 第一条虚线不展示
      for (let i = 0; i < index; i++) {
        if (this.propData[i].printEnabled) {
          isAllDisabled = false;
          break;
        }
      }
      return section.printEnabled && index !== 0 && !isAllDisabled;
    },
    shouldShowDivider2(v, item, index) {
      const length = v.fieldList.length;
      const lastIndex = length - 1;
      // 检查当前项后面的所有项是否都未选中
      for (let i = index + 1; i < length; i++) {
        if (v.fieldList[i].printEnabled) {
          // 如果后面有任一项被选中,则显示分隔线
          return (
            item.printEnabled &&
            index !== lastIndex &&
            v.sectionName === "pageTail" &&
            v.printEnabled
          );
        }
      }
      return false;
    },

    shouldShowDivider3(v, item) {
      const enabled = v.fieldList
        .slice(1)
        .some((ele) => ele.printEnabled == "1");
      return enabled && item.fieldName == "stationName";
    },
    // 是否展示小标题
    shouldShowTitle(section) {
      return (
        section.printEnabled &&
        !["baseSetting", "pageTail"].includes(section.sectionName)
      );
    },
    // 是否展示页头
    isPageHeadItem(v, item, val) {
      return (
        v.printEnabled == 1 &&
        item.printEnabled === 1 &&
        item.sectionName === "baseSetting" &&
        (val == 0
          ? item.fieldName == "stationName"
          : item.fieldName !== "stationName")
      );
    },
    // 内容展示逻辑
    shouldShowItem(section, item, val) {
      return (
        section.printEnabled === 1 &&
        item.printEnabled === 1 &&
        !this.sectionName.includes(section.sectionName) &&
        section.sectionName !== "baseSetting" &&
        (val !== 1 ? item.customFlag !== 1 : item.customFlag === val)
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.table_item {
  &:first-child {
    margin-right: 1rem;
  }
  display: flex;
  width: 33%;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  div:first-child{
    white-space: nowrap;
  }
}
.table {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.font_18 {
  font-size: 18px;
  font-weight: 700;
}
.font_22 {
  font-size: 22px;
  font-weight: 700;
}
.text_1 {
  line-height: 1.5;
  font-size: 16px;
}
.receipt {
  height: 100%;
  width: 100%;
  white-space: normal;
  overflow-y: auto; /* 超出部分隐藏 */
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  word-break: normal;
}
.top_title {
  // text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-wrap; /* 不换行 */
  // overflow: hidden; /* 溢出内容隐藏 */
  // text-overflow: ellipsis; /* 溢出内容用省略号表示 */
  margin: 1rem 0;
}
.title_name {
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}
.title_name1 {
  font-size: 16px;
  line-height: 2;
  font-weight: 700;
}
.receipt {
  height: 100%;
  width: 100%;
  white-space: normal;
  overflow-y: auto; /* 超出部分隐藏 */
  display: flex;
  flex-direction: column;
}
.el-tabs {
  border: none;
}
.divider {
  margin: 5px 0;
  height: 1px;
  border-bottom: 1px dashed black;
}
.divider2 {
  margin: 5px 0;
  height: 1px;
  border-bottom: 1px dashed black;
}
.div_center {
  margin-top: 0.2rem;
  text-align: left;
  white-space: pre-wrap;
}
</style>
